{% extends  "base.html" %}
{% block title %}Flask-{{ question.title|truncate(10) }}{% endblock %}
{% block content %}
    <div class="jumbotron">
        <div>
            <h2 class="text-center">{{ question.title }}</h2>
            <p class="lead text-center small">
                作者：{{ question.author.username }}&nbsp&nbsp时间：{{ question.create_time }}</p>
            <hr>
            <p class="text-center">{{ question.content }}</p>

        </div>
        <hr>
        <div>
            <h3>评论（{{ question.answers|length }}）</h3>
            <form class="form-signin" method="post" action="{{ url_for('qa.answer') }}">
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" class="form-control" name="content"/>
                        <input type="hidden" class="form-control" name="question_id" value="{{ question.id }}"/>
                        <span class="input-group-btn">
                        <button class="btn btn-primary" type="submit">评论</button>
                        </span>
                    </div>
                </div>
            </form>

        </div>
        <hr>
        <div class="bs-example" data-example-id="media-alignment">
            {% for answer in question.answers %}
                <div class="media">
                    <div class="media-left">
                        <img class="img-circle" data-src="holder.js/64x64" alt="64x64"
                             src="{{ url_for('static', filename='img/1.jpg') }}" data-holder-rendered="true"
                             style="width: 64px; height: 64px;">
                    </div>
                    <div class="media-body ">
                        <h5 class="media-heading">{{ answer.author.username }}</h5>
                        <div class="row">
                        <div class="col-md-10"><p>{{ answer.content }}</p></div>
                        <div class="col-md-2">{{ answer.create_time }}</div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
{% endblock %}